<template>
		<el-row style="margin: 20px;auto">
			<div class="div1">
				<span><i class="el-icon-notebook-2"></i> 更改密码</span>
				<hr>
				<table>
					<tr>
						<td>
							旧密码
						</td>
						<td>
							<el-input type="text" v-model="pwd.oldPwd" />
						</td>
					</tr>
					<tr>
						<td>
							新密码
						</td>
						<td>
							<el-input type="text" v-model="pwd.newPwd" />
						</td>
					</tr>
					<tr>
						<td>
							新密码确认
						</td>
						<td>
							<el-input type="text" v-model="pwd.newPwd2" />
						</td>
					</tr>
				</table>
				<br />
				<el-button type="primary" @click="updatePwd()">修改我的密码</el-button>
			</div>
		</el-row>
</template>

<script>
	export default {
		name: 'UpdatePwd',
		data() {
			return {
				pwd: {
					oldPwd: '',
					newPwd: '',
					newPwd2: ''
				}
			}
		},
		methods: {
			updatePwd() {
				if (this.pwd.newPwd != this.pwd.newPwd2) {
					return alert("第二次密码有误，请重新输入")
				}else{
					this.$postkv("/api/user/updatePwd", this.pwd).then((resp) => {
						this.$message({
							message: '密码修改成功',
							type: 'success'
						});
					})
				}
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
.div1{
	width: 100%;
}
.div1 span{
	margin-left: 25vw;
}
.div1 hr{
	border: 1px solid #409eff;
}
.div1 table{
	margin-left: 10vw;
	margin-top: 10vh;
}
.div1 table tr td .el-input{
	width: 580px;
	margin: 5px;
	margin-left: 20px;
}
.div1 .el-button{
	width: 280px;
	margin-left: 21vw;
}
</style>